<template>
	<div class="list" ref="wrapper">
		<div>
			<div class="area">
				<div class="title border-topbottom">当前城市</div>
				<div class="button-list">
					<div class="button-wrapper">
						<div class="button button-active">{{this.$store.state.city}}</div>
					</div>
				</div>
			</div>
			<div class="area">
				<div class="title border-topbottom">热门城市</div>
				<div class="button-list">
					<div class="button-wrapper" v-for="item in hot" :key="item.id" @click="handleCityClick(item.name)">
						<div class="button">{{item.name}}</div>
					</div>
				</div>
			</div>
			<div class="area" v-for="(item,key) in cities" :key="key" :ref="key">
				<div class="title">{{key}}</div>
				<ul class="item-list">
					<li v-for="innerItem in item" :key="innerItem.id"  @click="handleCityClick(innerItem.name)">{{innerItem.name}}</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  name: 'CityList',
  props: {
    hot: Array,
    cities: Object,
    letter: String
  },
  methods: {
  	handleCityClick (city) {
  		this.$store.commit('changeCity', city) /*使用$store.commit向Store页面传递请求 */
  		this.$router.push('/') /*使用$router.push 可以直接跳转到传值的页面*/
  	}
  },
  watch: {
    letter () {
      if (this.letter) {
        const element = this.$refs[this.letter][0]
        this.scroll.scrollToElement(element) /*滚动到点击对应的字母*/
      }
    }
  },
  mounted () {
    this.scroll = new BScroll(this.$refs.wrapper)
  },
}
</script>

<style lang="stylus" scoped="">
@import '~styles/varibles.styl'
.list
  position:absolute
  top:1.58rem
  left:0
  right:0
  bottom:0
  overflow: hidden
  .title
    height: .50rem
    line-height: .50rem
    padding-left: .2rem
    background: #eee
  .button-list
    padding: .15rem
    padding-right: .6rem
    overflow:hidden
    .button-wrapper
      float:left
      width:33.3%
      .button
        padding: .15rem
        margin: .1rem
        text-align:center
        border:solid 1px #ccc
        border-radius:.06rem
      .button-active
        border-color:$bgColor
        color:$bgColor
  .item-list li
    padding: .25rem
    border-bottom:solid 1px #eee
</style>